<template>
  <div class="app_slider_warpper">
    <a-affix :offset-top="94">
      <div class="radio_warpper">
        <a-anchor
          :affix="false"
          :getContainer="() => getElement()"
          wrapperClass="app_slider_anchor_warpper"
          @click="handleClick"
        >
          <a-anchor-link href="#anchor-setting" title="基本设置" />

          <!-- <a-anchor-link href="#anchor-after" title="提交后显示" /> -->
        </a-anchor>
      </div>
    </a-affix>
  </div>
</template>
<script lang="ts">
import { AnchorProps } from 'ant-design-vue';
import { defineComponent, reactive, ref } from 'vue';
export default defineComponent({
  components: {},
  emits: [
    /** 点击锚点 */
    'handleAnchor',
  ],
  setup(props, { emit }) {
    const value = ref<number>(10);
    const radioStyle = reactive({
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    });
    const getElement = () => {
      return document.getElementById('content_warpper');
    };

    const handleClick: AnchorProps['onClick'] = (e, link) => {
      e.preventDefault();
      emit('handleAnchor', e, link);
    };
    return { value, radioStyle, getElement, handleClick };
  },
});
</script>
<style lang="less" scoped>
.app_slider_warpper {
  width: 176px;
  .radio_warpper {
    background-color: white;
    display: flex;
    // align-items: center;
    justify-content: center;
    width: 176px;
    padding: 10px;
    border-radius: 8px;
  }
}
</style>
